<template>
  <div class="addOrEdit">
    <vue-header :title="headtitle" :left-options="{backText: ''}">

    </vue-header>
    <div class="addOrEdit-content">
      <div class="addOrEdit-content-list">
        <div class="addOrEdit-content-form">
          <div class="addOrEdit-content-form-flex">
            <div class="addOrEdit-content-form-flex-left">姓名</div>
            <div class="addOrEdit-content-form-flex-right">
              <x-input title="" name="username" v-model="addressname" placeholder="请输入收货人姓名"></x-input>
            </div>
          </div>
          <div class="addOrEdit-content-form-flex">
            <div class="addOrEdit-content-form-flex-left">电话</div>
            <div class="addOrEdit-content-form-flex-right">
              <x-input title="" name="mobile" placeholder="请输入收货人联系电话" v-model="addressphone" keyboard="number" is-type="china-mobile"></x-input>
            </div>
          </div>
          <div class="addOrEdit-content-form-flex">
            <div class="addOrEdit-content-form-flex-left"> 地址</div>
            <div class="addOrEdit-content-form-flex-right">
              <x-address @on-hide="logHide" @on-show="logShow" :title="title" v-model="addresspre" :list="addressData" @on-shadow-change="onShadowChange" placeholder="请选择所在的省市区县" :show.sync="showAddress"></x-address>
            </div>
          </div>
          <div class="addOrEdit-content-form-flex addressdesc" style="height:auto;border:none;min-height:1.3333rem;;text-align:right">
            <x-textarea placeholder="请输入具体地址，如某某街道某某小区等" v-model="addressdesc" style="width:100%;font-size: 0.4rem; font-weight: 600;" :show-counter="false" :rows="1" autosize></x-textarea>
          </div>
        </div>
      </div>
      <div class="address-content-btu">
        <div class="address-content-btu-defu" @click="goPage()">保存</div>
      </div>
    </div>
  </div>

</template>
<script>
import vueHeader from "@/components/vue-header/index";
import store from "@/store";
import { token_expires } from "@/utils/Keyword";
import ChinaAddress  from "@/utils/district.json";
import { mapGetters } from "vuex";
import { XInput,XAddress,ChinaAddressV4Data, XTextarea } from "vux";
import { addressChange } from "@/api/addressList";

export default {
  name: "addressedi",
  components: {
    XInput,
    vueHeader,
    XAddress,
    XTextarea
  },
  data() {
    return {
  
      addressid: "", //地址id
      addressname: "", //姓名
      addressphone: "", //电话
      addresspre: [], //省市
      addressdesc: "", //详细地址
      title: "",
      addressData: ChinaAddressV4Data,
      showAddress: false,
      headtitle: "", //头部标题
      addressarr:[],
      isMain:"", //是否默认地址
    };
  },

  computed: {
    ...mapGetters({
      items: "editAddress"
    })
  },
  mounted() {
    this.addressid = this.$route.query.addressid;
    this.isMain = this.$route.query.isMain;
    if (this.addressid) {
      this.headtitle = "编辑收货地址";
      this.getAddress(this.addressid);
    } else {
      this.headtitle = "添加收货地址";
    }
  },
  methods: {
    logShow() {},
    logHide() {},
    onShadowChange(ids) {
      this.addressarr=ids
    },
    getAddress(id) {
      //获取地址信息
      var params = {
        pf: "web",
        bid: "yw",
        uid: 107192,
        id: id
      };

      store.dispatch("EDITADDRESS", params).then(res => {
        const address = res.address;
        this.addressname = address.name;
        this.addressphone = address.phone;
        const provinceName = address.provinceName;
        const cityName = address.cityName;
        const countyName = address.countyName;
        this.addresspre = [
          address.provinceName,
          address.cityName,
          address.countyName
        ];
        this.addressdesc = address.addressDetail;
        if (res == token_expires) {
          this.getAddress(id);
        } else {
          this.$vux.loading.hide();
        }
      });
    },

    goPage(){ //保存地址

    var id="";
    if(this.addressid){
        id=String(this.addressid);
    }
      var params={
            pf: "web",
            bid: "yw",
			      id:id,
				    uid:107192,
						name:this.addressname,
						phone:this.addressphone,
						province:this.addressarr[0],
						city:this.addressarr[1],
						county:this.addressarr[2],
						addressDetail:this.addressdesc,
						isMain:this.isMain
      };
      
      addressChange(params).then(res => {
          if(res.addressId){

          var params = {
              pf: "web",
              bid: "yw",
              uid: 107192,
            };

          store.dispatch("ADDRESSLIST", params).then(res => {
             if (res == token_expires) {
                this.getaddress();
              }else{
                this.$vux.loading.hide();
                this.navigation_pop()
              }
          });

        
          }
      });

    }
  }
};
</script>
<style lang="scss" scoped>
.addOrEdit {
  background-color: #f0f0f0;
  height: 100%;
  .addOrEdit-content {
    height: calc(100vh - 46px);
    overflow: auto;
    .addOrEdit-content-list {
      margin-top: 0.32rem;
      background-color: white;
      .addOrEdit-content-form {
        padding: 0 0.32rem;
        .addOrEdit-content-form-flex {
          display: flex;
          height: 1.3333rem;
          font-size: 0.4rem;
          border-bottom: 1px solid #ececec;
          ::-webkit-input-placeholder {
            color: rgba(204, 204, 204, 1);
            font-size: 0.4rem;
            font-weight: 600 !important;
            text-align: right;
          }
          :-moz-placeholder {
            color: rgba(204, 204, 204, 1);
            font-size: 0.4rem;
            font-weight: 500;
            text-align: right;
          }
          :-ms-input-placeholder {
            color: rgba(204, 204, 204, 1);
            font-size: 0.4rem;
            font-weight: 500;
            text-align: right;
          }
          .addOrEdit-content-form-flex-left {
            flex: 1;
            font-size: 0.4rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 1.3333rem;
          }
          .addOrEdit-content-form-flex-right {
            flex: 1;
            font-size: 0.4rem;
            font-weight: 500;

            .weui-cell {
              padding: 0px !important;
              height: 1.3333rem;
            }
          
          }
        }
      }
    }
  }
}
</style>

<style>
 .addOrEdit-content-form-flex-right .weui-input,.addressdesc .weui-textarea{
    text-align: right!important;
  }
</style>

